<template>
  <a-card class="content-card">
    <a-list
      v-if="list.length > 0"
      class="content-list"
      :data="list"
      :bordered="false"
      :max-height="600"
      @reach-bottom="handleLoadPost"
    >
      <template #item="{ item, index }">
        <a-list-item
          :key="index"
          class="content-list-item"
          @click="handleClickItem(item)"
        >
          <div class="item-main">
            <div class="item-content">
              <div class="item-tags">
                <a-tag color="blue" class="zone-tag">
                  {{ item.zoneName || '综合' }}
                </a-tag>
                <a-space class="tag-list">
                  <template v-if="item.tags && item.tags.length > 0">
                    <a-tag
                      v-for="(tag, tagIndex) in item.tags"
                      :key="tagIndex"
                      :color="getTagColor(tagIndex)"
                    >
                      {{ tag }}
                    </a-tag>
                  </template>
                  <a-tag v-else color="gray">无标签</a-tag>
                </a-space>
              </div>
              <h3 class="item-title">{{ item.title }}</h3>
              <p class="item-desc">{{ item.content }}</p>
              <div class="item-meta">
                <div class="meta-left">
                  <a-popover>
                    <template #content>
                      <a-space size="medium">
                        <a-avatar :image-url="item.avatar" />
                        <a-space direction="vertical">
                          <a-typography-title bold style="font-size: 17px">
                            {{ item.creatorName }}
                          </a-typography-title>
                          <a-typography-paragraph
                            type="secondary"
                            style="font-size: 13px; width: 100px"
                            :ellipsis="{
                              rows: 1,
                              showTooltip: {
                                type: 'tooltip',
                                props: {
                                  position: 'bottom'
                                }
                              }
                            }"
                          >
                            {{ item.introduce }}
                          </a-typography-paragraph>
                        </a-space>
                      </a-space>
                    </template>
                    <a-avatar shape="square" :image-url="item.avatar" />
                  </a-popover>
                  <a-space size="large" style="margin-left: 16px">
                    <span class="meta-item">
                      <icon-eye />
                      <span>{{ item.viewNum }}</span>
                    </span>
                    <span class="meta-item">
                      <icon-thumb-up />
                      <span>{{ item.thumbNum }}</span>
                    </span>
                    <span class="meta-item">
                      <icon-star />
                      <span>{{ item.favourNum }}</span>
                    </span>
                  </a-space>
                </div>
                <span class="meta-date">{{ item.createTime }}</span>
              </div>
            </div>
          </div>
        </a-list-item>
      </template>
    </a-list>
    <a-skeleton v-else animation>
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-skeleton-line
          :rows="5"
          :widths="['40%', '100%', '100%', '100%', '50%']"
        />
      </a-space>
    </a-skeleton>
  </a-card>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { OjPostService } from '@/api/gen-api/services/OjPostService.ts';
import { OjPostQueryRequest, type OjPostVo, Paging } from '@/api/gen-api';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  zone: {
    type: String,
    default: 'synthesis'
  },
  tag: {
    type: String,
    default: ''
  }
});

// 为标签生成不同颜色
const tagColors = ['blue', 'green', 'orange', 'purple', 'cyan', 'red', 'gray'];
const getTagColor = (index: number) => {
  return tagColors[index % tagColors.length];
};

watch(
  () => props.zone,
  () => {
    if (props.zone) {
      req.value.zone = props.zone;
      list.value = [];
      paging.value.pageNum = 1;
      getPostList();
    }
  }
);

const paging = ref<Paging>({
  pageNum: 1,
  pageSize: 10
});
const req = ref<OjPostQueryRequest>({
  title: '',
  zone: '',
  tags: []
});

const list = ref<OjPostVo[]>([]);
const totalPage = ref();

const getPostList = () => {
  OjPostService.page({ page: paging.value, req: req.value }).then(res => {
    if (res.result.records) {
      totalPage.value = res.result.totalPage;
      list.value.push(...res.result.records);
      console.log('帖子列表数据:', list.value);
    }
  });
};

const handleLoadPost = () => {
  if (paging.value.pageNum >= totalPage.value) {
    Message.warning('没有更多了');
  } else {
    paging.value.pageNum++;
    getPostList();
  }
};

onMounted(() => {
  getPostList();
});

const router = useRouter();
const handleClickItem = (item: OjPostVo) => {
  router.push({
    name: 'PostInfo',
    query: {
      postId: item.id
    }
  });
};
</script>

<style scoped lang="less">
.content-card {
  border-radius: 4px;
  height: auto;
  min-height: calc(120vh - 100px);
  display: flex;
  flex-direction: column;
  margin-bottom: 0;

  :deep(.arco-card-header) {
    border-bottom: none;
    padding: 16px 20px;
  }

  :deep(.arco-card-body) {
    padding: 0;
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  :deep(.arco-list) {
    flex: 1;
    overflow: auto;
    padding-right: 12px;
  }

  :deep(.arco-list-content) {
    padding: 0 16px;
  }
}

.card-header {
  .arco-tag {
    border-radius: 2px;
  }
}

.content-list {
  background-color: #ffffff;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-text-4);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--color-fill-2);
    border-radius: 3px;
  }

  &-item {
    padding: 28px;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border-2);
    border-radius: 8px;
    margin: 16px 0;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    &:hover {
      cursor: pointer;
      border-color: #2759cd;
      background-color: rgb(39 89 205 / 7%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(39, 89, 205, 0.08);

      .item-title {
        color: #2759cd;
      }
    }

    .item-main {
      display: flex;
      flex-direction: column;
    }

    .item-content {
      flex: 1;
      min-width: 0;

      .item-tags {
        margin-bottom: 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .zone-tag {
          margin-right: 8px;
        }

        .tag-list {
          margin-top: 4px;
        }

        :deep(.arco-tag) {
          border-radius: 2px;
          margin-right: 6px;
          margin-bottom: 4px;
        }
      }
    }

    .item-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--color-text-1);
      margin: 0 0 16px;
      transition: color 0.3s;
      line-height: 1.5;
      padding-left: 0;
    }

    .item-desc {
      font-size: 14px;
      color: var(--color-text-3);
      margin: 0 0 24px;
      line-height: 1.6;
      padding-left: 0;
    }

    .item-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .meta-left {
        display: flex;
        align-items: center;
        gap: 16px;

        :deep(.arco-avatar) {
          width: 48px;
          height: 48px;
        }

        .meta-item {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          color: var(--color-text-3);
          font-size: 13px;

          .arco-icon {
            font-size: 14px;
          }
        }
      }

      .meta-date {
        font-size: 13px;
        color: var(--color-text-3);
      }
    }
  }
}

:deep(.arco-list-item-main) {
  overflow: hidden;
}

:deep(.arco-avatar) {
  background-color: var(--color-fill-2);
}
</style>
